<template>
    <div>
        <NavTopBar title="订单详情" fixed placeholder />

        <div class="order-status">
            <p>
                <label class="label">订单状态：</label>
                <span>{{ detail.orderStatusString }}</span>
            </p>
            <p>
                <label class="label">订单标号：</label>
                <span>{{ detail.orderNo }}</span>
            </p>
            <p>
                <label class="label">下单时间 ：</label>
                <span>{{ detail.createTime }}</span>
            </p>
            <van-button
                v-if="detail.orderStatus === 0"
                style="margin-bottom: 10px"
                color="#1baeae"
                block
                @click="showPayFn"
                >去支付</van-button
            >
            <van-button
                v-if="detail.orderStatus != -1"
                style="margin-bottom: 10px"
                block
                @click="cancelBtn(detail.orderNo)"
                >取消订单</van-button
            >
            <van-button block v-if="detail.orderStatus === -1"
                >订单已取消</van-button
            >
        </div>

        <div class="order-price">
            <p>
                <label class="label">商品金额：</label>
                <span>¥ {{ detail.totalPrice }}</span>
            </p>
            <p>
                <label class="label">配送方式：</label>
                <span>普通快递</span>
            </p>
        </div>

        <van-card
            v-for="item in detail.newBeeMallOrderItemVOS"
            :key="item.goodsId"
            style="background: #fff"
            :num="item.goodsCount"
            :price="item.sellingPrice"
            desc="全场包邮"
            :title="item.goodsName"
            :thumb="$filters.prefix(item.goodsCoverImg)"
        />

        <van-popup
            v-model:show="showPay"
            position="bottom"
            :style="{ height: '24%' }"
        >
            <div :style="{ width: '90%', margin: '0 auto', padding: '20px 0' }">
                <van-button
                    :style="{ marginBottom: '10px' }"
                    color="#1989fa"
                    block
                    @click="handlePayOrder(1)"
                    >支付宝支付</van-button
                >
                <van-button color="#4fc08d" block @click="handlePayOrder(2)"
                    >微信支付</van-button
                >
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import NavTopBar from "@/components/NavTopbar.vue";
import { useRoute, useRouter } from "vue-router";
import { getOrderDetail, cancelOrder, payOrder } from "@/apis/goods";
import { Dialog, Toast } from "vant";
export default defineComponent({
    components: { NavTopBar },

    setup() {
        const state: any = reactive({
            detail: {},
            showPay: false,
        });
        const route = useRoute();
        const router = useRouter();
        onMounted(() => {
            init();
        });

        const init = async () => {
            const { id } = route.query;
            const { data } = await getOrderDetail(id);
            state.detail = data;
        };
        // 取消订单
        const cancelBtn = (id: number) => {
            Dialog.confirm({
                title: "确认取消订单？",
            })
                .then(async () => {
                    const res = await cancelOrder(id);
                    Toast("删除成功");
                    init();
                })
                .catch(() => {
                    // on cancel
                });
        };

        // 显示支付页面
        const showPayFn = () => {
            state.showPay = true;
        };

        // 支付
        const handlePayOrder = async (type: number) => {
            await payOrder({
                orderNo: state.detail.orderNo,
                payType: type,
            });
            Toast.success("支付成功");
            setTimeout(() => {
                router.push({ path: "/order" });
            }, 2000);
        };

        return { cancelBtn, ...toRefs(state), showPayFn, handlePayOrder };
    },
});
</script>

<style lang="scss" scoped>
label {
    color: #999;
}
.order-status {
    padding: 20px;
    font-size: 16px;
    p {
        margin-bottom: 10px;
    }
}
.order-price {
    padding: 20px 0;
    background: #f7f7f7;
    p {
        background: #fff;
        padding: 0 20px;
        font-size: 16px;
        line-height: 35px;
    }
}
</style>
